<template>
  <div class="SearchSong">
    <div class="tip">找到{{ songCount }}首单曲</div>
    <div class="multiMatch" v-if="multiMatch.artist&&currentPage===1">
    <div class="MatchTitle">最佳匹配</div>
      <div class="MatchResult"
         @click="GoToSingerDetail(multiMatch.artist[0].id)"
    >
      <div class="MatchCover">
<!--        图片-->
    <img :src="multiMatch.artist[0].img1v1Url+'?param==200y200'" alt="">
      </div>
      <div class="MatchName">
        歌手:{{multiMatch.artist[0].name}}
        <i class="iconfont icon-arrow-right-bold"></i>
      </div>
    </div>
      </div>
<!--    渲染歌曲-->
    <el-table :data="searchSongList"
              size="mini"
              style="width: 100%"
              highlight-current-row
              @cell-dblclick="DoubleItem"
              stripe
    >
<!--      序号-->
    <el-table-column label="" width="45" type="index"
    :index="handleIndex"
    >
<!--      <i class="iconfont icon-xiazai"></i>-->
    </el-table-column>
      <el-table-column label="歌曲" min-width="200" prop="name"
    ></el-table-column>
      <el-table-column label="歌手" min-width="200" prop="ar[0].name"
    ></el-table-column>
      <el-table-column label="专辑" min-width="200" prop="al.name"
    ></el-table-column>
      <el-table-column label="时长" min-width="60" prop="dt"
    ></el-table-column>
    </el-table>
<!--    分页-->
    <div class="page" v-if="searchSongList.length!==0">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="songCount"
        small
        :page-size="30"
        :current-page="currentPage"
        @current-change="pageChange"
      >
      </el-pagination>

    </div>
  </div>
</template>

<script>
import {handleMusicTime} from "../../../../plugins/utils";

export default {
  name: "SearchSong",
  data() {
    return {
      //最佳匹配
      multiMatch: {},
      //  搜索歌曲列表
      searchSongList: [],
      //  搜索结果总数
      songCount: 0,
      //  当前页
      currentPage: 1
    }
  },
  methods: {
    //初始化
    init(){
      this.searchSongList = [];
      this.multiMatch = {}
    },
    //双击表格条目回调
    /*
    参数：row, column, cell, event
     */
     DoubleItem(row){
      /*
      * 双击把当前双击的歌曲放到播放歌单中
      * */
    //  获取当前播放歌单列表
      let MusicList = this.$store.state.MusicStore.musicList,
                //  获取当前播放的歌曲索引
        CurrentIndex = this.$store.state.MusicStore.currentIndex,
    //      判断双击的歌曲是否已经存在该播放歌单中
        IsExist = MusicList.find((item)=>item.id===row.id);
      if(IsExist){
      //  已经存在,则只提交歌曲ID
        this.$store.commit("MusicStore/updateMusicId",row.id);
        return ;
      }
    //  改变播放的歌曲
      this.$store.commit("MusicStore/changePlayState");
    //  不存在时，将该歌曲详情保存到Vuex中
      /*
      splice(index,howmany,item1, ..., itemX)
      参数：index 添加/删除项目的位置，使用负数可从数组结尾处规定位置。
      howmany：要删除的项目数量。如果设置为 0，则不会删除项目
      itemX:可选。向数组添加的新项目。
      */
      MusicList.splice(CurrentIndex+1,0,row);
      this.$store.commit("MusicStore/updateMusicId",row.id);
      this.$store.commit("MusicStore/updateMusicList",{
        MusicList,
        musicListId:this.$store.state.MusicStore.musicListId,
      });
    },
    //获取最最佳匹配
    async GetMultiMatch() {
      /*
      根据地址中的参数进行搜索
       */
      let res = await this.$request('/search/multimatch', {
        keywords: this.$route.params.id
      })
      //  保存匹配结果
      this.multiMatch = res.data.result;
    },
    //  搜索单曲
    async GetSearchSong() {
      /*
      可选参数 : limit : 返回数量 , 默认为 30 offset : 偏移数量，用于分页 , 如 : 如 :( 页数 -1)*30,
      其中 30 为 limit 的值 , 默认为 0
      type: 搜索类型；默认为 1 即单曲 ,
      取值意义 : 1: 单曲, 10: 专辑, 100: 歌手, 1000: 歌单, 1002: 用户, 1004: MV,
      1006: 歌词, 1009: 电台, 1014: 视频, 1018:综合
       */
      let res = await this.$request('/cloudsearch', {
        keywords: this.$route.params.id,
        offset:(this.currentPage-1)*30
      })
      console.log('获取歌曲',res)
      if (res.data){
        //获取总数
      this.songCount = res.data.result.songCount;
    //  搜索歌曲
      this.searchSongList = res.data.result.songs;
    // 音乐时长
      this.searchSongList.forEach((item,index)=>{
        /*
        item 每首音乐
        index 索引
         */
      //  处理时长后保存到音乐列表每首对应的歌曲中
        this.searchSongList[index].dt = handleMusicTime(item.dt)
      })
      }

    },
    //处理索引
    handleIndex(index){
      index = index+1+30*(this.currentPage-1)
      return (index<10)?"0"+index:index;
      // if(index<10){
      //   return "0"+index;
      // }
    },
  //  分页回调
    pageChange(page){
      //切换当前页
      this.currentPage = page
      //先清空当前页音乐
      this.searchSongList = []
    //  再次获取音乐
      this.GetSearchSong()
    },
  //  点击最佳匹配的回调
    GoToSingerDetail(id){
      console.log(id)
    }


  },
  created() {
    //获取前先对数据初始化
    this.init()
    //获取最佳匹配
    this.GetMultiMatch()
    //搜索结果
    this.GetSearchSong()

  }
}
</script>

<style scoped lang="less">
.SearchSong{
  padding: 0 15px;
  .tip {
    text-align: left;
  font-weight: bold;
  color: rgb(34, 34, 34);
  margin-bottom: 10px;
}

.matchTitle {
  font-size: 12px;
  color: rgb(34, 34, 34);
  margin: 5px 0;
}

.matchResult {
  display: flex;
  align-items: center;
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  background-color: #f4f4f4;
  width: 270px;
  height: 65px;
  margin-bottom: 20px;
  cursor: pointer;
}

.matchCover {
  width: 65px;
  height: 65px;
}

.matchCover img {
  width: 100%;
  height: 100%;
}

.matchName {
  font-size: 13px;
  color: rgb(31, 31, 31);
  margin-left: 10px;
}

.multiMatch i {
  position: absolute;
  transform: translateY(-50%);
  right: 15px;
  top: 50%;
}

.page {
  width: 100%;
  text-align: center;
  padding-bottom: 20px;
  margin: 20px 0;
}
}

</style>
